<template>
  <div class="song-brief">
    <div class="s-img">
      <img :src="$filters.formatImgSize(songList.coverImgUrl, 200)" alt="404" />
    </div>
    <div class="s-menu">
      <div class="title">
        <div>
          <span class="tol">歌单</span>
          <span class="title-a">{{ songList.name }}</span>
        </div>
        <div class="r-nums">
          <div class="sums">
            歌曲数
            <p>{{ songList.trackCount }}</p>
          </div>
          <div class="plays">
            播放数
            <p>{{ $filters.formatPlays(songList.playCount) }}</p>
          </div>
        </div>
      </div>
      <div class="time">
        <a href="#">
          <img
            :src="$filters.formatImgSize(songList.creator.avatarUrl, 50)"
            alt="404"
          />
        </a>
        <a href="#" class="source">{{ songList.creator.nickname }}</a>
        <span class="time-t"
          >{{ $filters.formatTime(songList.createTime) }}创建</span
        >
      </div>
      <div class="btn">
        <el-button
          size="mini"
          type="primary"
          :icon="VideoPlay"
          @click="playAll(songList.id)"
        >
          播放全部
          <button class="btn-a" @click.stop="subscripe(songList.id)">+</button>
        </el-button>
        <el-button size="small" :icon="Star" @click="subscripe(songList.id)"
          >收藏({{ $filters.formatPlays(songList.subscribedCount) }})</el-button
        >
        <el-button size="small" :icon="Share"
          >分享({{ $filters.formatPlays(songList.shareCount) }})</el-button
        >
        <el-button size="small" :icon="Download">下载全部</el-button>
      </div>
      <div class="tag">
        <span>标签:</span>
        <a href="#" v-for="(item, index) in songList.tags" :key="index">{{
          index + 1 === songList.tags.length ? item : item + ' / '
        }}</a>
      </div>
      <div class="brief">
        <span style="marginright: 8px">简介:</span>
        <span style="lineheight: 1.5">{{
          (songList.description + '').substr(0, 200) + '...'
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { useStore } from 'vuex'
import { VideoPlay, Star, Share, Download } from '@element-plus/icons-vue'

const props = defineProps({
  songList: {
    type: Object,
    required: true
  },
  dataList: {
    type: Array,
    default: () => []
  }
})

const store = useStore()
const subscripe = (id: number) => {
  console.log(id)
}
const playAll = (id: number) => {
  store.dispatch('music/playMusic', props.dataList[0])
}
</script>

<style lang="less" scoped>
.song-brief {
  display: flex;
  flex-wrap: wrap;

  .s-img {
    width: 20%;
    margin: 0 20px;

    img {
      width: 100%;
    }
  }

  .s-menu {
    width: 70%;
    display: flex;
    flex-direction: column;

    .title {
      display: flex;
      justify-content: space-between;

      .tol {
        border: 1px solid red;
        font-size: 14px;
        color: red;
        padding: 2px;
        margin-right: 7px;
      }

      .title-a {
        font-size: 23px;
        font-weight: 10px;
      }

      .r-nums {
        display: flex;
        color: #ccc;
        font-size: 14px;
        min-width: 110px;
        min-height: 30px;

        .sums {
          border-right: 1px solid #ccc;
          padding-right: 8px;
          position: relative;

          p {
            position: absolute;
            right: 8px;
            top: 6px;
          }
        }

        .plays {
          position: relative;
          padding-left: 15px;

          p {
            position: absolute;
            right: 0;
            top: 6px;
          }
        }
      }
    }

    .time {
      margin-top: 15px;

      img {
        border-radius: 50%;
        width: 28px;
        margin-right: 8px;
        vertical-align: middle;
      }

      .time-t {
        font-size: 13px;
        color: #333;
      }

      .source {
        color: rgba(0, 0, 255, 0.7);
        margin-right: 8px;
      }
      .source:hover {
        color: blue;
      }
    }

    .btn {
      margin-top: 15px;

      .btn-a {
        background: #409eff;
        cursor: pointer;
        border: none;
        color: #fff;
      }
    }

    .tag {
      margin-top: 15px;
      font-size: 13px;

      span {
        margin-right: 8px;
      }

      a {
        color: #0c73c2;
      }
    }

    .brief {
      font-size: 13px;
      margin-top: 15px;
    }
  }
}
</style>
